<template>
    <div class="link_pagination">
         <div class="paginationLeft">
            <span >显示</span>
            <el-input v-model.lazy="limitSync" maxlength="2"  @blur="changeLimit('blur')" @keyup.enter.native="changeLimit('enter')"></el-input>
            <span>条记录，共{{pageNumber}}页，共{{total}}条记录</span>
        </div>
        <div class="paginationRight">
            <el-pagination
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="limit"
                layout="prev, pager, next"
                prev-text="上一页"
                next-text="下一页"
                :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    import { scrollTo } from '@/utils/scrollTo'
    export default {
        props: {
            total: {
                default: 0
            },
            currentPage: {
                default: 1
            },
            limit: {
                default: 20
            },
            autoScroll: {
                type: Boolean,
                default: true
            },
        },
        data: function(){
            return {
                limitSync: this.limit,            // 分页
            }
        },
        methods: {
            // 分页 -- 编辑页码
            handleCurrentChange(val) {
                this.$emit('pagination', { page: val, limit: this.limit });
                if (this.autoScroll) {
                    scrollTo(0, 800)
                }
            },
            // 分页 -- 编辑每页的条数
            changeLimit(type){
                if(this.limitSync > 0){
                    this.limit = parseInt(this.limitSync);
                } else {
                    this.limit = 10;
                    this.limitSync = 10;
                    this.$message({
                        showClose: true,
                        message: '请输入大于0的数字，谢谢！',
                        type: 'warning'
                    });
                }
                this.currentPage = 1;
                this.$emit('pagination', { page: this.currentPage, limit: this.limit });
                if (this.autoScroll) {
                    scrollTo(0, 800)
                }
            },
            // 分页 -- 跳转首页或尾页
            /* jumpPage(val){
                switch(val){
                    case "1"://跳转到首页
                        this.currentPage = 1;
                        this.$emit('pagination', { page: this.currentPage, limit: this.limit });
                        if (this.autoScroll) {
                            scrollTo(0, 800)
                        }
                        break;
                    case "0"://跳转到末页
                        this.currentPage = this.pageNumber;
                        this.$emit('pagination', { page: this.currentPage, limit: this.limit });
                        if (this.autoScroll) {
                            scrollTo(0, 800)
                        }
                        break;
                }
            }, */
        },
        computed: {
            // 总页数
            pageNumber(){
                let pageNumber = Math.floor(this.total/this.limit);
                return  this.total%this.limit ? pageNumber+1 : pageNumber; 
            }
        },
    }
</script>

<style lang="scss">
    .link_pagination{
        background: #fff;
        height: 46px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0px;
        font-size: 16px;
        color: #333333;
        .paginationLeft{
            margin-left: 15px;
            display: flex;
            align-items: center;
            .el-input{
                width: 30px;
                height: 32px;
                margin: 0px 5px;
                .el-input__inner{
                    width: 100%;
                    height: 100%;
                    padding: 0px 5px;
                }
            }
        }
        .paginationRight{
            display: flex;
            align-items: center;
            /* .first-pager{
                font-size: 14px;
                color: #303133;
                font-weight: 700;
                font-family: element-icons;
                margin-right: 5px;
                cursor: pointer;
                &.forbid{
                    cursor: no-drop;
                    color: #909399;
                    &:hover{
                        color: #909399;
                    }
                }
                &:hover{
                    color: #409EFF;
                }
            } */
            .el-pagination{
                display: flex;
                align-items: center;
                font-size: 16px;
                color: #333333;
            }
            /* .last-pager{
                font-size: 14px;
                color: #303133;
                font-weight: 700;
                font-family: element-icons;
                line-height: 24px;
                margin-left: 5px;
                margin-right: 15px;
                cursor: pointer;
                &.forbid{
                    cursor: no-drop;
                    color: #909399;
                    &:hover{
                        color: #909399;
                    }
                }
                &:hover{
                    color: #409EFF;
                }
            } */
        }
    }
</style>
